function getDocumentTypes() {
	// create the Data Store
	var store = new Ext.data.JsonStore({
	    root: 'topics',
	    totalProperty: 'totalCount',
	    idProperty: 'threadid',
	    remoteSort: true,
	
	    fields: [
	        'title', 'forumtitle', 'forumid', 'author',
	        {name: 'replycount', type: 'int'},
	        {name: 'lastpost', mapping: 'lastpost', type: 'date', dateFormat: 'timestamp'},
	        'lastposter', 'excerpt'
	    ],
	
	    // load using script tags for cross domain, if the data in on the same domain as
	    // this page, an HttpProxy would be better
	    proxy: new Ext.data.ScriptTagProxy({
	        url: 'http://extjs.com/forum/topics-browse-remote.php'
	    	})
	});

	store.setDefaultSort('lastpost', 'desc');

	// pluggable renders
	function renderTopic(value, p, record){
      return String.format(
              '<b><a href="http://extjs.com/forum/showthread.php?t={2}" target="_blank">{0}</a></b><a href="http://extjs.com/forum/forumdisplay.php?f={3}" target="_blank">{1} Forum</a>',
              value, record.data.forumtitle, record.id, record.data.forumid);
	}
	
	function renderLast(value, p, r){
      return String.format('{0}<br/>by {1}', value.dateFormat('M j, Y, g:i a'), r.data['lastposter']);
	}

	var grid = new Ext.grid.GridPanel({
	    width:700,
	    height:500,
	    store: store,
	    trackMouseOver:false,
	    disableSelection:true,
	    loadMask: true,
	    border: false,
	
	    // grid columns
	    columns:[{
	        id: 'topic', // id assigned so we can apply custom css (e.g. .x-grid-col-topic b { color:#333 })
	        header: "Topic",
	        dataIndex: 'title',
	        width: 420,
	        renderer: renderTopic,
	        sortable: true
	    },{
	        header: "Author",
	        dataIndex: 'author',
	        width: 100,
	        hidden: true,
	        sortable: true
	    },{
	        header: "Replies",
	        dataIndex: 'replycount',
	        width: 70,
	        align: 'right',
	        sortable: true
	    },{
	        id: 'last',
	        header: "Last Post",
	        dataIndex: 'lastpost',
	        width: 150,
	        renderer: renderLast,
	        sortable: true
	    }],
	
	    // customize view config
	    viewConfig: {
	        forceFit:true,
	        enableRowBody:true,
	        showPreview:true,
	        getRowClass : function(record, rowIndex, p, store){
	            if(this.showPreview){
	                p.body = '<p>'+record.data.excerpt+'</p>';
	                return 'x-grid3-row-expanded';
	            }
	            return 'x-grid3-row-collapsed';
	        }
	    },
	
	    // paging bar on the bottom
	    bbar: new Ext.PagingToolbar({
	        pageSize: 20,
	        store: store,
	        displayInfo: true,
	        displayMsg: 'Displaying topics {0} - {1} of {2}',
	        emptyMsg: "No topics to display",
	        items:[
	            '-', {
	            pressed: true,
	            enableToggle:true,
	            text: 'Show Preview',
	            cls: 'x-btn-text-icon details',
	            toggleHandler: function(btn, pressed){
	                var view = grid.getView();
	                view.showPreview = pressed;
	                view.refresh();
	            }
	        }]
	    })
	});
		
	var win = new Ext.Window({
				//applyTo:'body',
	  layout:'fit',
	  width:800,
	  height:600,
	  closeAction:'hide',
	  plain: true,
	  maximizable: true,
	  modal: true,

	  buttons: [{
	      text:'Imprimir',
	      handler: function() {
	      	Ext.ux.Printer.print(grid);
	  		}
	  },{
	      text: 'Cerrar',
	      handler: function(){
	          win.hide();
	      }
	  }],

	  items: [grid]
	});

	// trigger the data store load
  	store.load({params:{start:0, limit:25}});
	win.show();
}